<template>
<!-- 办事指南 -->
	<div class="container" v-loading="loading">
		<div class="statusbar clearfix">
			<div class="w25 back" @click="fnBack()">
				<img src="../../assets/icon/back@2x.png" alt="">
				<span>返回</span>
			</div>
			<div class="w50 topcenter">
				<span>{{titles}}</span>
			</div>
		</div>
		<div class="swiper" style="margin-top: 3.3rem;position: relative;">
			<span  style="position: absolute; left: 2.5rem;color: #fff;font-size: 1.6rem;top: 50%;transform:translateY(-50%); opacity: 0.8;">{{titles}}</span>
			<img src="../../assets/vv_02.png" alt="">
		</div>
		<div class="search clearfix">
			<div class="sear_input">
				<el-input size="small" clearable placeholder="请输入需要搜索的内容" prefix-icon="el-icon-search" v-model="searchs">
				</el-input>
			</div>
			<div class="btn">
				<button @click="fnSearch">搜索</button>
			</div>

		</div>
		<div class="switch_title">
			<ul class="btns" ref='uls'>
				<li v-bind:class="{ active: isActive==index }" @click="fnSwitch(index,item.id)" :key="index" v-for="(item,index) in threeNav">
					<div v-if='item.type==2'>
						<router-link :to='item.url'>
							<span>{{item.displayName}}</span>
							<div v-bind:class="{ line: isActive==index }"></div>
						</router-link>
					</div>
					<div v-else>
						<span>{{item.displayName}}</span>
						<div v-bind:class="{ line: isActive==index }"></div>
					</div>
				</li>
			</ul>
		</div>
		<div v-if="Articles.length>0" v-for='item in Articles' :key='item.id'>
			<div class="clearfix moreBox">
			<div style="padding-top: 1rem;">
				<span>{{item.categoryName}}</span>
				<router-link :to="{ name:'guideList', params: {id: item.categoryId,type:item.categoryName},query:{type:item.categoryName} }">
					更多&gt;
				</router-link>
			</div>
		</div>
		<div class="wrap picBoxs guides">
			<div class="content homes">
				<ul>
					<router-link v-bind="{to:'/Details/'+(items.id)}" v-for='items in item.articles' :key='items.id'>
						<li class="clearfix">
							<img :src="items.cover?items.cover:''" alt="">
							<p class="text2">{{items.title}}</p>
							<p class="time">{{items.creationTime | yy}}</p>
						</li>
					</router-link>
				</ul>
			</div>
		</div>
		</div>
		<div class="linkbox">
			<router-link v-bind="{to:'/LawAid/26?type=0'}" v-if='isActive==0'><el-button  class='btnLink'>快速<br />办理</el-button></router-link> 
			<router-link v-bind="{to:'/compose/27?type=0'}" v-if='isActive==1'><el-button  class='btnLink'>快速<br />办理</el-button></router-link> 
			<!--<router-link :to="1" v-if='isActive==2'><el-button class='btnLink'>快速<br />办理</el-button></router-link> 
			<router-link :to="1" v-if='isActive==3'><el-button class='btnLink'>快速<br />办理</el-button></router-link> 
			<router-link :to="1" v-if='isActive==4'><el-button class='btnLink'>快速<br />办理</el-button></router-link>-->
		</div>
	</div>
</template>
<script>
	import Api from "../../kites/api";
	export default {
		name: "Guide",
		data() {
			return {
				datalist:false,
				tip: false,
				loading: true,
				isActive: 0, //1.法律援助  2.人民调解  3.特殊人群服务  4.公证服务
				searchs: "",
				id: '',
				threeNav: [],
				pages: 10,
				pageindex: 1,
				totalCount: '',
				Articles: [],
				titles:'',
				parentId:'',//父id
				host:Api.hostname
			};
		},
		beforeRouteLeave(to,from,next){
			  if(to.name=='Detail'||to.name=='guideList'){
			  	from.meta.keepAlive = true
			  }else{
			  	from.meta.keepAlive = false
			  }
		    next();
		},
		beforeCreate() {
			this.openIds()
		},
		mounted() {},
		created() {
			this.id = this.$route.params.id
			this.GetMenuDetail()
			this.infothrnav()
		},
		methods: {
			//切换动态
			fnSwitch(type, id) {
				console.log(id)
				this.id = id
				this.searchs=''
				this.datalist = false
				this.isActive = type;
				this.GetMenuArticles(id)
			},
			//搜索
			fnSearch() {
				this.pages = 10
				this.pageindex = 1
				this.totalCount = 0
				this.loading = true
				this.$post(Api.GetMenuGroupArticles, {
					"filter": this.searchs,
					"menuId": this.id,
					"sorting": '',
					"maxResultCount": this.pages,
					"skipCount": this.pages * (this.pageindex - 1),
				}).then(res => {
					console.log(res)
					if(res.status == 200) {
						this.loading = false
						this.Articles = res.data.result.length>0?res.data.result:[{'articles':[]},{'articles':[]},{'articles':[]}]
						if(this.totalCount==0){
							this.datalist=true
						}else{
							this.datalist=false
						}
					} else {
						this.loading = false
						this.$message.error(res.data.error);
					}
				})
			},
			//返回上一页
			fnBack() {
				 this.$router.push({
		          name: 'InfoQuery',
		          params: {
		            id: this.parentId
		          }
		        })
			},
			//获取上级
			GetMenuDetail(){
				this.$post(Api.GetMenuDetail, {
					'id': this.id
				}).then(res => {
					console.log(res)
					if(res.data.success == true) {
						this.titles = res.data.result.displayName
						this.parentId = res.data.result.parentId
					} else {
						this.loading = false
						this.$message.error(res.data.error);
					}
				})
			},
			//获取信息查询下的子菜单
			infothrnav() {
				this.loading = true
				this.$post(Api.GetTopMenu, {
					'parentId': this.id
				}).then(res => {
					console.log(res)
					if(res.status == 200) {
						this.loading = false
						this.threeNav = res.data.result
						console.log(this.$refs.uls)
						if(this.threeNav.length<4){
							this.$refs.uls.style.width ='100%'
						}
						this.GetMenuArticles(this.threeNav[0].id)
					} else {
						this.loading = false
						this.$message.error(res.data.error);
					}
				})
			},
			//获取文章列表
			GetMenuArticles(id) {
				this.pages = 10
				this.pageindex = 1
				this.totalCount = 0
				this.loading = true
				this.id = id
				this.$post(Api.GetMenuGroupArticles, {
					"filter": this.searchs,
					"menuId": id,
					"sorting": '',
					"maxResultCount": this.pages,
					"skipCount": this.pages * (this.pageindex - 1),
				}).then(res => {
					console.log(res)
					if(res.status == 200) {
						this.loading = false
						this.Articles = res.data.result
						console.log(this.Articles)
					} else {
						this.loading = false
						this.$message.error(res.data.error);
					}
				})
			},
		}
	};
</script>
<style scoped>
	.wrap .content ul li {
		border-bottom: none;
	}
	
	.btns a {
		color: #000000;
	}
	.linkbox{
		position: fixed;
		bottom: 5rem;
		text-align: center;
		width: 4rem;
		right: 3rem;
		height: 4rem;
	}
	.btnLink{
		color: #fff;
		background: #3e5899;
		font-size: 1.1rem;
		width: 4rem;
		height: 4rem;
		border-radius: 50%;
		text-align: center;
		padding: 0;
		border: none;
		box-shadow: 0px 0px 4px #000;
	}
</style>